import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import debounce from 'lodash/debounce';
import { Select, Spin, Empty } from 'antd';
import styles from '../index.less';
import { useUpdateEffect } from 'ahooks'
/**
 * 用户选择器
 */
const { Option } = Select;

const UserSelect = (props) => {
    const {
        dispatch,
        fieldNames = {},
        loading,
        placeholder,
        multiple = false,
        onChange,
        params = {}
    } = props;

    const { label = 'teacherName', value = 'id', tip = 'tipInfo' } = fieldNames;
    const [total, setTotal] = useState(0)
    const [searchData, changeSearchData] = useState({
        pagination: {
            page: 1,
            limit: 10
        },
        keyword: ''
    })
    const [option, setOption] = useState([])
    const { pagination: { page, limit }, keyword } = searchData
    // 获取用户搜索
    const scrollEnd = (e) => {
        e.persist();
        const { target } = e;
        // 滚动 触底 看接口是否还有剩余的值没传过来
        console.log(target.scrollTop, target.offsetHeight, target.scrollHeight)
        if (parseInt(target.scrollTop + target.offsetHeight + 1) >= target.scrollHeight) {
            changeSearchData({
                ...searchData,
                pagination: {
                    ...searchData.pagination,
                    page: page + 1
                },
            })
        }
    }
    const fetchGetUser = debounce((reload) => {
        if (reload) {
            dispatch({
                type: 'selectionWindow/fetchListTeacher',
                payload: {
                    ...params,
                    page, limit, keyword, status: ''

                },
                callback: (e, total) => {
                    setTotal(total)
                    setOption(e)
                }
            });
        }
        else {
            dispatch({
                type: 'selectionWindow/fetchListTeacher',
                payload: {
                    ...params,
                    page, limit, keyword,
                    status: ''
                },
                callback: (e, total) => {
                    setTotal(total)
                    setOption([...option, ...e])
                }
            });
        }
    }, 500);
    useEffect(() => {
        fetchGetUser()
    }, [page])
    useUpdateEffect(() => {
        console.log('更新了', keyword)
        // setOption(() => {
        //   return []
        // })
        fetchGetUser(true)
    }, [keyword])
    //  multiple = true 配置
    let multProps = {};
    if (multiple) multProps = { mode: 'multiple', maxTagCount: 2 };
    // 返回结果
    return (
        <Select
            allowClear
            showSearch
            style={{ width: '100%' }}
            onPopupScroll={scrollEnd}
            filterOption={() => { return true }}
            loading={loading}
            notFoundContent={loading ? <Spin size="small" /> : null}
            placeholder={placeholder || '请选择'}
            onSearch={(val) => {
                console.log(val)
                changeSearchData({
                    pagination: {
                        ...searchData.pagination,
                        page: 1
                    },
                    keyword: val
                })
            }}
            onChange={onChange}
            maxTagTextLength={5}
            {...multProps}
        >
            {option.map((data, j) => {
                if (data) {
                    // 兼容数组
                    const valueData = !data[value] ? `${j}` : data[value];
                    const nameData = data[value] ? data[label] : data;
                    const otherData = data[tip] ? data[tip] : '';
                    return (
                        <Option key={j} value={valueData} className={styles.formSelect}>
                            {`${nameData}\n${otherData}`}
                        </Option>
                    );
                }
            })}
        </Select>
    );
};

export default connect(({ loading }) => ({
    loading: loading.effects['selectionWindow/fetchListTeacher'],
}))(UserSelect);
